<template>
  <div class="home-container">
    <topnav :userinfo="userinfo"></topnav>
    <shopHeader></shopHeader>
    <div class="main-container">
      <div class="toptitle">
        <span class="cart-switch">购物车(全部{{ itemCountUp }})</span>
        <div class="cart-sum">
          <span class="pay-text">已选商品（不含运费）</span>
          <span class="money">{{ sumup === 0 ? sumup : "￥" + sumup }}</span>
          <el-button
            type="warning"
            class="btn-checkoutabled"
            :class="count === 0 ? 'btn-disabled' : ''"
            @click="handleSettlement"
            >结算</el-button
          >
        </div>
      </div>
      <div class="main-body">
        <div class="table-th">
          <div class="checkbox">
            <input
              class="CheckBoxShop"
              type="checkbox"
              name="select-all"
              v-model="allcheck"
              @change="handleCheckAll(allcheck)"
            />
            <span>全选</span>
          </div>
          <div class="th-item">商品信息</div>
          <div class="th-info"></div>
          <div class="th th-price">单价</div>
          <div class="th th-number">数量</div>
          <div class="th">金额</div>
          <div class="th">操作</div>
        </div>
        <div class="table-body">
          <div
            class="table-item"
            v-for="(item, index) in tableData"
            :key="index"
          >
            <div class="item-top">
              <input
                class="CheckBoxShop"
                type="checkbox"
                name="select-single"
                v-model="item.isChecked"
                @change="handleChecked(item.isChecked, index)"
              />
              <span>店铺：{{ item.shopName }}</span>
            </div>
            <div class="item-bottom">
              <div
                class="item-content"
                :class="`${item.isChecked === true ? 'checkShop' : ''}`"
              >
                <ul
                  class="item-body"
                  v-for="(item2, idx2) in item.items"
                  :key="idx2"
                  :class="`${item2.isChecked === true ? 'checkedClass' : ''}`"
                >
                  <li class="checkbox">
                    <input
                      class="CheckBoxShop"
                      type="checkbox"
                      name="select-single"
                      v-model="item2.isChecked"
                      @change="handleItemChecked(index, idx2)"
                    />
                  </li>
                  <li class="item-info">
                    <img :src="`http://127.0.0.1:3007/${item2.imgSrc}`" alt="" />
                    <div class="info-title">
                      {{ item2.title }}
                    </div>
                  </li>
                  <li class="item-detail">
                    <div class="t">
                      {{ item2.type }}
                    </div>
                    <div class="b">{{ item2.model }}</div>
                  </li>
                  <li class="item item-price">
                    <div class="price-original">
                      ￥{{ item2.originalPrice }}
                    </div>
                    <div class="price-now">￥{{ item2.nowPrice }}</div>
                  </li>
                  <li class="item">
                    <el-input-number
                      :min="1"
                      v-model="item2.number"
                    ></el-input-number>
                  </li>
                  <li class="item item-sum">
                    <span
                      >￥{{ (item2.sum = item2.nowPrice * item2.number) }}</span
                    >
                  </li>
                  <li class="item-op">
                    <el-button type="text" class="opt-button"
                      >移入收藏夹</el-button
                    >
                    <el-button type="text" class="opt-button" @click="handleDelItem(item.id,item2.id)">删除</el-button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottomopt">
        <div class="checkbox">
          <input
            class="CheckBoxShop"
            type="checkbox"
            name="select-all"
            v-model="allcheck"
            @change="handleCheckAll(allcheck)"
          />
          <span>全选</span>
          <span class="del-btn opt-btn">删除</span>
          <span class="opt-btn">移入收藏夹</span>
        </div>
        <div class="opt-r">
          <div class="cart-sum">
            已选商品<span class="number">{{ count }}</span
            >件
          </div>
          <div class="cart-sum">
            合计（不含运费）：<span class="number">{{
              sumup === 0 ? sumup : "￥" + sumup
            }}</span>
          </div>
          <el-button
            type="warning"
            class="btn-checkoutabled"
            :class="count === 0 ? 'btn-disabled' : ''"
            @click="handleSettlement"
            >结算</el-button
          >
        </div>
      </div>
    </div>
    <mainFooter></mainFooter>
  </div>
</template>
<script>
import topnav from '@/components/topnav.vue'
import shopHeader from '@/components/header.vue'
import mainFooter from '@/components/footer.vue'
export default {
  components: {
    topnav,
    shopHeader,
    mainFooter
  },
  data () {
    return {
      userinfo: {},
      allcheck: false,
      count: 0,
      sumup: 0,
      tableData: []
    }
  },
  created () {
    this.getUserInfo()
  },
  mounted () {

  },
  computed: {
    itemCountUp: function () {
      let count = 0
      this.tableData.forEach((item) => {
        count += item.items.length
      })
      return count
    }
  },
  methods: {
    async getUserInfo () {
      const { data: res } = await this.$http.get('/user/getUserInfo')
      if (res.code !== 200) return this.$message.error('获取用户信息失败！')
      this.userinfo = res.data
      this.getTableData()
    },
    handleChecked (isChecked, index) {
      if (isChecked) {
        this.tableData[index].items.forEach((i) => {
          i.isChecked = true
        })
      } else {
        this.tableData[index].items.forEach((i) => {
          i.isChecked = false
        })
      }
    },
    handleItemChecked (index, idx2) {
      let count = 0
      this.tableData[index].items.forEach((i) => {
        if (i.isChecked) {
          count = count + 1
        }
      })
      if (count === this.tableData[index].items.length) {
        this.tableData[index].isChecked = true
      } else {
        this.tableData[index].isChecked = false
      }
    },
    handleCheckAll (isChecked) {
      if (isChecked) {
        this.tableData.forEach((i1) => {
          i1.isChecked = true
          i1.items.forEach((i2) => {
            i2.isChecked = true
          })
        })
      } else {
        this.tableData.forEach((i1) => {
          i1.isChecked = false
          i1.items.forEach((i2) => {
            i2.isChecked = false
          })
        })
      }
    },
    handleSettlement () {
      const infoList = []
      this.tableData.forEach(info => {
        for (let i = 0; i < info.items.length; i++) {
          let temp = {}
          if (info.items[i].isChecked) {
            temp.shopId = info.id
            temp = Object.assign(temp, info.items[i])
            temp.order_sumup = this.sumup
            infoList.push(temp)
          }
        }
      })
      this.$router.push({ path: '/settlement', query: { info: JSON.stringify(infoList) } })
    },
    async getTableData () {
      const { data: res } = await this.$http.post('/cart/getUserCart', { id: this.userinfo.id })
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.tableData = res.data
    },
    handleDelItem (shopId, goodId) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await this.$http.post('/cart/delCartItem', {
            userId: this.userinfo.id,
            goodId: goodId,
            shopId: shopId
          })
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          this.$message.success('删除成功！')
          this.getTableData()
        })
        .catch(() => {})
    }
  },
  watch: {
    tableData: {
      handler (value) {
        this.count = 0
        this.sumup = 0
        for (var i = 0; i < value.length; i++) {
          value[i].items.forEach((item) => {
            if (item.isChecked === true) {
              this.count++
              this.sumup += item.sum
            }
          })
        }
        if (this.count === this.itemCountUp) {
          this.allcheck = true
        } else {
          this.allcheck = false
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.home-container {
  background: #e8e3e1;
  height: 100%;
  width: 100%;
  overflow: auto;
  position: relative;
  .main-container {
    border-radius: 24px;
    background: #fff;
    width: 1200px;
    margin: 0 auto;
    min-height: 400px;
    margin-top: 24px;
    .checkedClass {
      background: #fff9f6;
    }
    .checkShop {
      border: 1px solid #ff5000 !important;
      background: #fff9f6 !important;
    }
    .btn-checkoutabled {
      width: 74px;
      //   height: 42px;
      //   line-height: 42px;
      border-radius: 21px;
      text-align: center;
      color: #fff;
      background: #ff5000;
    }
    .btn-disabled {
      background: #aaa;
      border: none;
      cursor: not-allowed;
    }
    .toptitle {
      font-size: 14px;
      height: 72px;
      line-height: 72px;
      display: flex;
      justify-content: space-between;
      padding: 0 18px;
      border-bottom: 1px solid #e6e6e6;
      .cart-switch {
        font-size: 18px;
        font-weight: bold;
      }
      .cart-sum {
        .money {
          font-weight: 400;
          margin-right: 12px;
          font-size: 22px;
          color: #ff5000;
        }
      }
    }
    .CheckBoxShop {
      margin-right: 10px;
      height: 15px;
      width: 15px;
    }
    .main-body {
      padding: 0 20px;

      .table-th {
        font-size: 13px;
        height: 50px;
        line-height: 50px;
        font-weight: 700;

        display: flex;
        .checkbox {
          width: 6%;

          span {
            white-space: nowrap;
          }
        }
        .th-item {
          width: 30%;
          text-align: center;
        }
        .th-info {
          width: 24%;
        }
        .th {
          width: 12%;
          text-align: center;
        }
      }
      .table-body {
        .item-bottom {
          padding: 10px;
          .item-content {
            border: 1px solid #f5f5f5;
            background-color: #f5f5f5;
            border-radius: 18px;
            .item-body {
              padding: 15px;
              display: flex;
              position: relative;
              border-radius: 18px;
              img {
                max-height: 80px;
                max-width: 80px;
                border-radius: 4px;
                margin-right: 14px;
              }
              .item-info {
                width: 30%;
                display: flex;
                .info-title {
                  font-size: 12px;
                  cursor: pointer;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  color: rgba(0, 0, 0, 0.85);
                  &:hover {
                    text-decoration: underline;
                    color: #f40;
                  }
                }
              }
              .item-detail {
                width: 23%;
                display: block;
                padding: 0 10px;
                font-size: 12px;
                color: rgba(0, 0, 0, 0.45);
                .t {
                  max-height: 36px;
                  cursor: pointer;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
              .item {
                width: 12%;
                text-align: center;
                .price-original {
                  text-decoration: line-through;
                  color: rgba(0, 0, 0, 0.45);
                }
                .price-now {
                  font-weight: 700;
                }
              }
              .item-sum {
                color: #f40;
                font-weight: 700;
              }
              .item-op {
                color: #000;
                position: absolute;
                right: 20px;
                .opt-button {
                  display: block;
                  &:hover {
                    text-decoration: underline;
                  }
                }
              }
            }
          }
        }
      }
    }
    .bottomopt {
      font-size: 14px;
      height: 72px;
      line-height: 72px;
      display: flex;
      justify-content: space-between;
      padding: 0 18px;
      border-top: 1px solid #e6e6e6;
      .del-btn {
        margin-left: 50px;
        margin-right: 50px;
      }
      .opt-btn {
        cursor: pointer;
        &:hover {
          color: #f40;
          text-decoration: underline;
        }
      }
      .opt-r {
        display: flex;
        align-items: center;
        .cart-sum {
          margin-left: 20px;
          .number {
            color: #f40;
            font-size: 20px;
            vertical-align: top;
            margin: 0 10px;
          }
        }
        .btn-checkoutabled {
          height: 42px;
        }
      }
    }
  }
}
</style>
<style lang="less">
.el-input-number {
  width: 100% !important;
}
.opt-button.el-button--text {
  color: rgba(0, 0, 0, 0.85) !important;
  font-size: 12px !important;
  &:hover {
    color: #f40 !important;
    text-decoration: underline;
  }
}
</style>
